const tabEnums = {
  0: "todo",
  1: "done",
};
// @param tabEnum 0 / 1
function tabChange(tabEnum) {
  // 初始化所有按钮状态, tabs获取到是所有tab-btn HTML
  const tabs = document.getElementsByClassName("tab-btn");
  if (tabs) {
    for (let i = 0; i < tabs.length; i++) {
      tabs[i].classList.remove("active");
    }
  }
  // 找到当前点击的按钮, id: todo-btn、done-btn
  // tabEnums = { 0: 'todo', 1: 'done' }, tabEnums[tabEnum] => 'todo' or 'done'
  const activeBtn = document.getElementById(`${tabEnums[tabEnum]}-btn`);
  // 给当前点击按钮增加激活样式
  activeBtn.classList.add("active");

  // 初始化所有的列表展示
  const contentLists = document.querySelectorAll(".tab-content");
  if (contentLists) {
    for (let i = 0; i < contentLists.length; i++) {
      contentLists[i].classList.remove("active");
    }
  }
  // 找到当前要激活的列表
  const activeList = document.querySelector(`#${tabEnums[tabEnum]}`);
  activeList.classList.add("active");
}

window.onload = function () {
  deleteTask();
  completeTask();
};

// 待办任务的删除
function deleteTask() {
  const deleteBtns = document.querySelectorAll(".delete-btn");

  /**
   * 箭头函数
   * 声明: const arrowFunction = () => {}
   *
   * 使用: arrowFunction()
   */

  if (deleteBtns) {
    deleteBtns.forEach((btn) => {
      btn.addEventListener("click", handleDeleteTask);
    });
  }
}

// 待办任务完成
function completeTask() {
  /**
   * 1. 获取所有的完成按钮
   * 2. 给所有的完成按钮添加点击事件
   * 3. 获取到当前点击完成按钮的task item
   * 3. 从TODO列表里面删除当前点击完成按钮的task item （removeChild）
   * 4. 往Done列表里面添加当前点击完成按钮的task item (appendChild)
   */
  const completeBtns = document.querySelectorAll(".complete-btn");
  if (completeBtns) {
    completeBtns.forEach((btn) => {
      btn.addEventListener("click", function () {
        const taskElement = this.parentElement.parentElement;
        const taskActions = taskElement.querySelector(".task-actions");
        taskElement.removeChild(taskActions);

        // 创建一个done列表项的按钮组
        const unCompleteBtnGroups = document.createElement("div");
        unCompleteBtnGroups.classList.add("task-actions");

        const unCompleteBtn = document.createElement("button");
        unCompleteBtn.classList.add("action-btn", "un-complete-btn-1");

        unCompleteBtn.addEventListener('click', unCompleteTask);

        unCompleteBtn.innerHTML = `
        <span class="iconfont icon-duigou btn-icon"></span>
                            <span class="btn-text">未完成</span>`;

        unCompleteBtnGroups.appendChild(unCompleteBtn);
        taskElement.appendChild(unCompleteBtnGroups);

        // 获取done 列表
        // const doneTaskList = document.querySelector('#done .task-list);
        const doneContainer = document.getElementById("done");
        const doneTaskList = doneContainer.querySelector(".task-list");
        /**
         * 浏览器在执行 DOM 操作中，当使用 appendChild() 方法时，如果要添加的节点已经存在于文档中的其他位置，该节点会先从原来的位置被移除，然后添加到新的位置。
         * https://www.runoob.com/jsref/met-node-appendchild.html
         */
        doneTaskList.appendChild(taskElement);
      });
    });
  }
}

// 创建完成按钮
function createCompleteButton() {
    const completeBtn = document.createElement('button');
    completeBtn.classList.add('action-btn', 'complete-btn');
    completeBtn.innerHTML = `
        <span class="iconfont icon-duigou btn-icon"></span>
        <span class="btn-text">完成</span>
    `;
    completeBtn.addEventListener('click', handleCompleteTask);
    return completeBtn;
}

// 创建删除按钮
function createDeleteButton() {
    const deleteBtn = document.createElement('button');
    deleteBtn.classList.add('action-btn', 'delete-btn');
    deleteBtn.innerHTML = `
        <span class="iconfont icon-fork btn-icon"></span>
        <span class="btn-text">删除</span>
    `;
    deleteBtn.addEventListener('click', handleDeleteTask);
    return deleteBtn;
}

// 创建未完成按钮
function createUnCompleteButton() {
    const unCompleteBtn = document.createElement("button");
    unCompleteBtn.classList.add("action-btn", "un-complete-btn");
    unCompleteBtn.innerHTML = `
        <span class="iconfont icon-duigou btn-icon"></span>
        <span class="btn-text">未完成</span>
    `;
    unCompleteBtn.addEventListener('click', unCompleteTask);
    return unCompleteBtn;
}

// 处理完成任务的逻辑
function handleCompleteTask() {
    const taskElement = this.parentElement.parentElement;
    const taskActions = taskElement.querySelector(".task-actions");
    taskElement.removeChild(taskActions);

    const unCompleteBtnGroups = document.createElement("div");
    unCompleteBtnGroups.classList.add("task-actions");
    unCompleteBtnGroups.appendChild(createUnCompleteButton());
    taskElement.appendChild(unCompleteBtnGroups);

    const doneContainer = document.getElementById("done");
    const doneTaskList = doneContainer.querySelector(".task-list");
    doneTaskList.appendChild(taskElement);
}

// 处理删除任务的逻辑
function handleDeleteTask() {
    const taskElement = this.parentElement.parentElement;
    const todoContainer = document.getElementById("todo");
    const taskList = todoContainer.querySelector(".task-list");
    taskList.removeChild(taskElement);
}

// 处理未完成任务的逻辑
function unCompleteTask() {
    const taskElement = this.parentElement.parentElement;
    
    // 删除当前的task-actions
    const oldTaskActions = taskElement.querySelector('.task-actions');
    taskElement.removeChild(oldTaskActions);
    
    // 创建新的task-actions
    const newTaskActions = document.createElement('div');
    newTaskActions.classList.add('task-actions');
    
    // 添加完成和删除按钮
    newTaskActions.appendChild(createCompleteButton());
    newTaskActions.appendChild(createDeleteButton());
    
    // 添加新的task-actions
    taskElement.appendChild(newTaskActions);
    
    // 移动到待办列表
    const todoContainer = document.getElementById("todo");
    const todoTaskList = todoContainer.querySelector(".task-list");
    todoTaskList.appendChild(taskElement);
}
